<template>
  <div
    v-if="!readonly"
    class="flow-process-add__node"
    :class="{ vertical: vertical }"
  >
    <div class="flow-process-add__node-btn" :class="[type]">
      <el-popover
        popper-class="popover-process-node-type"
        placement="right"
        trigger="click"
        v-model="showNodeTypePopover">
        <biz-flow-process-node-type-content :showNodeTypePopover="showNodeTypePopover" @click="onNodeTypeClick" :addNodeTypeList="addNodeTypeList" :nodeList="nodeList"></biz-flow-process-node-type-content>
         <i class="iconfont icon-plus-circle-fill" slot="reference" @click="onAddNodeClick"></i>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { store } from '../constant'
import emitter from '../emit'
import { cloneDeep } from 'lodash'
import { FlowEnum } from '@model/enum/FlowEnum';

export default {
  name: 'flow-process-add-node',
  props: {
    nodeList: {
      type: [Array, null],
      default() {
        return null
      }
    },
    nodeData: {
      type: Object,
      default: null
    },
    nextData: {
      type: Object,
      default: null
    },
    btnType: {
      type: String,
      default: '' // dot、normal
    }
  },
  data() {
    return {
      readonly: store.readonly,
      vertical: store.vertical,
      addNodeBtnType: 'normal',
      showNodeTypePopover: false,
      nodeTypePopoverStyle: {},
    }
  },
  computed: {
    type() {
      return this.addNodeBtnType === 'normal'
        ? this.addNodeBtnType
        : this.btnType || this.addNodeBtnType
    },
    /** 点击添加获取可添加的数据 */
    addNodeTypeList() {
      return store?.addNodeTypeData ?? [];
    }
  },
  methods: {
    /** 点击添加按钮 */
    onAddNodeClick() {
      const { type: preType } = this.nodeData;
      let addNodeTypeList = cloneDeep(store.nodeTypeList);

      emitter.emit('add-node-popover-type-click', preType, addNodeTypeList)
      // this.addNodeTypeList = this.handelNodeTypeList();
    },
    /** 点击添加按钮 */
    onNodeTypeClick(...args) {
      this.showNodeTypePopover = false;
      emitter.emit('add-node-type-click', this.nodeList, this.nodeData, this.nextData, ...args)
    },
    /** 根据上一个节点的类型添加节点弹窗数据 */
    handelNodeTypeList() {
      const { type: preType } = this.nodeData;
      let addNodeTypeList = cloneDeep(store.nodeTypeList);
  
      if (preType === 'finish') {
        addNodeTypeList = addNodeTypeList.filter(item => item.type === 'builtIn');
      }
      if (['normal'].includes(preType)) {
        addNodeTypeList = addNodeTypeList.filter(item => item.type !== 'builtIn');
      }

       addNodeTypeList.forEach(item => {
        if (preType === 'start') {
          item.list = item.list.filter(e => e.type !== FlowEnum.COST && e.type !== FlowEnum.REVIEW);
        }
        if (preType === 'accept' && item.type === 'builtIn') {
          item.list = item.list.filter(e => e.type === FlowEnum.START);
        }
        if (preType === 'finish' && item.type === 'builtIn') {
          item.list = item.list.filter(e => e.type !== FlowEnum.START);
        }
        return item;
      });

      return addNodeTypeList;
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-process-add__node {
  position: absolute;
  right: 0;
  top: 0;
  width: 65px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &.vertical {
    right: auto;
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
  }

  &-btn {
    position: relative;
    z-index: 2;
    cursor: pointer;
    &:hover {
      z-index: 3;
    }

    &.dot {
      transform: scale(0.3);

      svg {
        transform: scale(0);
      }
    }

    &.normal {
      transform: scale(1);

      svg {
        transform: scale(1);
      }
    }

   .iconfont {
      font-size: 21px;
      line-height: 36px;
      color: #BFBFBF;
      background: #fff;
      border: 1px solid #fff;
      &:hover {
        color: $color-primary;
      }
    }
  }

  .flow-process-node__type-popover {
    position: absolute;
    visibility: hidden;
    transform: scale(0);
    transition: all 0.3s;
    z-index: 23;
    box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
    z-index:99999;
    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      width: 20px;
      height: 100%;
    }

    &::before {
      left: -20px;
    }

    &::after {
      right: -20px;
    }

    &.show {
      visibility: visible;
      transform: scale(1);
    }
  }
}
</style>
<style>
.popover-process-node-type {
  max-height: 75%;
  overflow-y: auto;
}
</style>
